<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>资源权限</title>

		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>

	</head>
	<body>
		<div id="app">

			<fieldset style="border: 1px solid darkgray;margin-bottom: 4px;">
				<legend><i style="color: darkgray;" class="el-icon-search">查询</i></legend>

				<el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="姓名">
						<el-input v-model="formInline.user" placeholder="姓名"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">查询</el-button>
					</el-form-item>
				</el-form>

			</fieldset>

			<el-table size="mini" :data="tableData" border style="width: 100%">
				<el-table-column prop="permistitle" label="资源名字" width="180">
				</el-table-column>
				<el-table-column prop="href" label="链接地址" width="180">
				</el-table-column>
				<el-table-column prop="description" label="备注">
				</el-table-column>

				<el-table-column>
					<template slot="header" slot-scope="scope">
						<el-button @click="dialogVisible=true" type="primary" size="mini">增加</el-button>
					</template>

					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>

			</el-table>

			<div style="text-align: center;">
				<el-pagination @current-change="handleCurrentChange" :page-size="5" background
					layout="prev, pager, next" :total="total">
				</el-pagination>
			</div>

			<!-- 增加的dialog -->
			<el-dialog title="增加资源权限" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
				<el-row :gutter="15">
					<el-form ref="elForm" :model="formData" size="mini" label-width="100px">
						<el-col :span="12">
							<el-form-item label="资源名字" prop="permistitle">
								<el-input v-model="formData.permistitle" placeholder="请输入名字" clearable
									:style="{width: '100%'}">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="链接地址" prop="href">
								<el-input v-model="formData.href" placeholder="请输入链接地址" clearable
									:style="{width: '100%'}"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="所属父级" prop="href">
								<el-select v-model="formData.parent" placeholder="请选择父级">
									<el-option v-for="item in permisoptions" :key="item.value" :label="item.permistitle"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="备注" prop="description">
								<el-input v-model="formData.description" placeholder="请输入备注" clearable
									:style="{width: '100%'}"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item size="large">
								<el-button size="mini" type="primary" @click="submitForm">增加</el-button>
								<el-button size="mini" @click="resetForm">重置</el-button>
							</el-form-item>
						</el-col>
					</el-form>
				</el-row>


				<!-- <span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
				</span> -->
			</el-dialog>



		</div>


		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					tableData: [],
					total: 20, //分页的总条数
					formInline: {
						user: '',
					},
					formData: { //增加资源权限的表单对象绑定
						permistitle: undefined,
						href: undefined,
						description: undefined,
						parent: undefined,
					},
					permisoptions: [], //所属父菜单下拉列表
					dialogVisible: false, //增加的dialog
					page: 1, //默认当前页
				},
				methods: {
					handleEdit(index, row) {
						console.log(index, row);
					},
					handleDelete(index, row) {
						console.log(index, row);
					},
					onSubmit() {
						console.log('submit!');
					},
					handleClose(done) {
						done();
					},
					submitForm() { //增加的表单提交执行函数
						let that = this
						axios.post("http://localhost:8081/insertpermis", this.formData).then(function(res) {
							if (res.data.code = 200) {
								that.$message("增加成功")
								that.dialogVisible = false //关闭dialog
							}
						}).catch(err => {
							console.log(err)
						});


					},
					resetForm() {
						this.$refs['elForm'].resetFields()
					},
					initdata() { //初始化表格数据
						let that = this
						//发送ajax请求，获取后端接口数据
						axios.post("http://localhost:8081/selectpermis/" + this.page + "/5", {}).then(function(res) {
							// alert(JSON.stringify(res.data.data.pageInfo))
							that.tableData = res.data.data.pageInfo.list
							that.total = res.data.data.pageInfo.total
						}).catch(err => {
							console.log(err)
						});

					},
					handleCurrentChange(val) {
						this.page = val
						this.initdata()
					},
					selectpermisoptions() { //获取父菜单的下拉列表
						let that = this
						//发送ajax请求，获取后端接口数据
						axios.post("http://localhost:8081/selectpermis", {
							"parent": 0
						}).then(function(res) {
							that.permisoptions=res.data.data.list
							// alert(JSON.stringify(res.data.data.list))
						}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() {
					this.initdata()
					this.selectpermisoptions()
				}
			})
		</script>
	</body>
</html>